<template>
  <section class="M">
    <header>header</header>
    <main>
      <router-view />
    </main>
    <footer>
      <router-link exact-active-class="active" :to="{ name: 'MHome' }">
        <i></i>
        <span>首页</span>
      </router-link>
      <router-link exact-active-class="active" :to="{ name: 'MClassify' }">
        <i></i>
        <span>分类</span>
      </router-link>
      <router-link exact-active-class="active" :to="{ name: 'MCart' }">
        <i></i>
        <span>购物车</span>
      </router-link>
      <router-link exact-active-class="active" :to="{ name: 'MMine' }">
        <i></i>
        <span>我的</span>
      </router-link>
    </footer>
  </section>
</template>

<script>
export default {
  name: "M",
};
</script>

<style scoped lang="stylus">
footer
  height .5rem
  box-shadow 0 -1px 10px rgba(0, 0, 0, .6)
  position fixed
  bottom 0
  left 0
  right 0
  display flex
  align-items center

  a
    width 25%
    text-align center
    text-decoration none

    i
      display block
      height .25rem
      width .25rem
      background no-repeat center / contain
      margin 0 auto .05rem

    span
      display block
      font-size .1rem
      color #333333

    &.active span
      color darkred

    &:nth-child(1) i
      background-image url("../assets/m/tabbar/home.svg")
    &:nth-child(2) i
      background-image url("../assets/m/tabbar/classify.svg")
    &:nth-child(3) i
      background-image url("../assets/m/tabbar/cart.svg")
    &:nth-child(4) i
      background-image url("../assets/m/tabbar/mine.svg")

    &:nth-child(1).active i
      background-image url("../assets/m/tabbar/home-red.svg")
    &:nth-child(2).active i
      background-image url("../assets/m/tabbar/classify-red.svg")
    &:nth-child(3).active i
      background-image url("../assets/m/tabbar/cart-red.svg")
    &:nth-child(4).active i
      background-image url("../assets/m/tabbar/mine-red.svg")
</style>
